<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>万东影院 | 管理员</title>
  <link th:href="@{/images/logo.svg}" rel="icon" type="image/svg+xml">
  <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
  <link th:href="@{/css/bootstrap-icons.min.css}" rel="stylesheet">
</head>
<body>
<header>
  <ul class="nav nav-tabs m-2">
    <li class="nav-item">
      <a class="nav-link disabled">
        <i class="bi bi-person-circle"></i>
        <span class="ms-1">管理员</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/admin/users}">
        <i class="bi bi-person-lines-fill"></i>
        <span class="ms-1">用户列表</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link active">
        <i class="bi bi-person-fill-add"></i>
        <span class="ms-1">新建用户</span>
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link" th:href="@{/admin/log}">
        <i class="bi bi-journals"></i>
        <span class="ms-1">操作日志</span>
      </a>
    </li>
    <li class="nav-item ms-auto">
      <a class="nav-link" th:href="@{/me}">
        <i class="bi bi-person-gear"></i>
        <span class="ms-1">账号管理</span>
      </a>
    </li>
  </ul>
</header>
<main class="d-flex justify-content-center py-5">
  <div class="card w-25 p-3 mt-5">
    <div class="d-flex my-2">
      <a class="btn btn-link w-auto" th:href="@{/admin/users}">返回</a>
    </div>
    <div class="d-flex mb-3">
      <p class="mx-auto h4">创建新的用户</p>
    </div>
    <form class="d-flex flex-column gap-3" method="post" id="form">
      <div class="form-floating">
        <input class="form-control" placeholder="用户名" type="text"
               id="usernameInput" name="username">
        <label for="usernameInput">用户名</label>
      </div>
      <div class="form-floating">
        <input class="form-control" placeholder="密码" type="password"
              id="passwordInput" name="password">
        <label for="passwordInput">密码</label>
      </div>
      <div class="form-floating">
        <input class="form-control" placeholder="手机号" type="text"
            id="phoneNumberInput" name="phoneNumber">
        <label for="phoneNumberInput">手机号</label>
      </div>
      <div>
        <span class="me-3 ms-2 text-muted">身份</span>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio"
                 id="adminRadio" name="role" value="ROLE_ADMIN">
          <label class="form-check-label" for="adminRadio">管理员</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio"
                 id="managerRadio" name="role" value="ROLE_MANAGER">
          <label class="form-check-label" for="managerRadio">经理</label>
        </div>
        <div class="form-check form-check-inline">
          <input class="form-check-input" type="radio"
                id="userRadio" name="role" value="ROLE_USER">
          <label class="form-check-label" for="userRadio">普通用户</label>
        </div>
      </div>
      <div class="d-flex flex-wrap gap-2">
        <button class="btn btn-secondary flex-grow-1" type="reset">重置</button>
        <button class="btn btn-primary flex-grow-1"
                type="submit" id="submitButton">确认</button>
      </div>
    </form>
  </div>
</main>
<script th:src="@{/js/axios.min.js}"></script>
<script th:src="@{/js/bootstrap.bundle.min.js}"></script>
<script>
const form = document.getElementById("form");
const submitButton = document.getElementById("submitButton");

async function submitForm() {
  const formData = new FormData(form);

  const data = {};
  formData.forEach((value, key) => {
    data[key] = value;
  });

  try {
    const response = await axios.post('/api/users', data, {
      headers: {'Content-Type': 'application/json'}
    });

    if (response.status === 200) {
      alert("创建用户成功");
      const id = response.data.id;
      location.href = `/admin/users/${id}`
    }
  } catch (error) {
    if (!error.response) {
      console.log(error);
    }
    else if (error.response.status === 400) {
      alert(error.response.data);
    }
  }
}

submitButton.addEventListener("click", event => {
  event.preventDefault();
  submitForm();
});
</script>
</body>
</html>